<template>
  <div :class="['x-input',{'x-input-maxlength':maxlength}]">
    <el-input v-bind="$props"  @change="handleChange" @focus="handleFocus" @blur="handleBlur"/>
    <span v-if="maxlength" class="weak small"><i>{{value.length}}</i>/{{maxlength}}</span>
  </div>
</template>

<script>
  import * as ui from 'l-element'
  let props = Object.assign({}, ui.default.Input.props)
  export default {
    props: {
      ...props
    },
    methods: {
      handleChange (value) {
        this.$emit('change', value).$emit('input', value)
      },
      handleFocus (e) {
        this.$emit('focus', e)
      },
      handleBlur (e) {
        this.$emit('blur', e)
      }
    }
  }
</script>

<style lang="scss">
  @import '~styles/var.scss';
  .x-input {
    &-maxlength{
      position:relative;
      .el-input__inner {
        padding-right: 50px;
      }
      .weak{
        position:absolute;
        right:10px;
        top:50%;
        margin-top:-6px;
        line-height:100%;
        background:$input-background-color;
        i{
          font-style:normal
        }
      }
      .el-textarea+.weak{
        top: auto;
        bottom:10px;
        margin-top:0;
      }
    }
  }
</style>
